<template>
  <div class="container">
    <!-- 卡片区域 -->
    <el-card class="box-card">
      <!-- 搜索功能 -->
      <div class="container-search">
        <span>目录名称</span>
        <el-input class="tableinp" v-model="input"></el-input>
        <!-- 状态-->
        <span>状态</span>
        <el-select class="selectinp" v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <!-- 状态-->
        <el-button size="small" class="clear">清除</el-button>
        <el-button size="small" type="primary">搜索</el-button>
        <el-button
          size="small"
          class="selectIncrease"
          type="success"
          icon="el-icon-edit"
          >新增目录</el-button
        >
      </div>

      <!-- 搜索功能 -->

      <!-- 提示文案 -->
      <el-alert title="数据一共 0 条" type="info" show-icon :closable="false">
      </el-alert>
      <!-- 提示文案 -->
      <!-- 表格 -->
        <el-table :data="subjectsList" style="width: 100%">
          <el-table-column label="序号" type="index" width="40">
          </el-table-column>
          <el-table-column prop="subjectName" label="学科名称" width="130">
          </el-table-column>
          <el-table-column prop="username" label="创建者" width="130">
          </el-table-column>
          <el-table-column prop="addDate" label="创建日期" width="180">
          </el-table-column>
          <el-table-column
            prop="isFrontDisplay"
            label="前台是否显示"
            width="130"
          >
          </el-table-column>
          <el-table-column
            prop="twoLevelDirectory"
            label="二级目录"
            width="130"
          >
          </el-table-column>
          <el-table-column prop="tags" label="标签" width="130">
          </el-table-column>
          <el-table-column prop="totals" label="题目数量" width="130">
          </el-table-column>
          <el-table-column label="操作" width="250">
            <template slot-scope="scope">
              <el-button
                @click.native.prevent="deleteRow(scope.$index, tableData)"
                type="text"
                size="small"
              >
                学科分类
              </el-button>
              <el-button
                @click.native.prevent="deleteRow(scope.$index, tableData)"
                type="text"
                size="small"
              >
                学科标签
              </el-button>
              <el-button
                @click.native.prevent="deleteRow(scope.$index, tableData)"
                type="text"
                size="small"
              >
                修改
              </el-button>
              <el-button
                @click.native.prevent="deleteRow(scope.$index, tableData)"
                type="text"
                size="small"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 表格 -->
        <!-- 分页-->
        <el-pagination
        class="Pagination"
        background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-size="10"
          layout=" prev, pager, next,sizes, jumper"
          :page-sizes="[5, 10, 20, 50]"
          :total="20">
        >
        </el-pagination>
        <!-- 分页-->
    </el-card>
    <!-- 卡片区域 -->
  </div>
</template>

<script>
export default {
  name: '',
  data () {
    return {
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      value: ''
    }
  }
}
</script>

<style scoped lang="less">
.el-input {
  position: relative;
  font-size: 14px;
  display: inline-block;
  width: 15%;
}
.status {
  height: 30px;
}
.tableinp {
  margin: 0 15px;
}
.selectinp {
  margin: 0 15px;
}
.selectIncrease {
  float: right;
}
.el-alert {
  margin: 20px 0;
}
</style>
